<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>flex基础-项目属性01</title>
		<style type="text/css">
			ul{
				display: flex;
				list-style: none;
			}
			li{
				width: 100px;
			}
			li:nth-of-type(1){
				background: yellow;
				order: -2;
			}
			li:nth-of-type(2){
				background: yellowgreen;
				order: -3;
			}
			li:nth-of-type(3){
				background: pink;
				order: 5;
			}
			li:nth-of-type(4){
				background: orange;
				order: 2;		
			}
			li:nth-of-type(5){
				background: greenyellow;
			}
			
		</style>
	</head>
	<body>
		<!--
			项目的顺序: 默认为0,数值越小,越靠前;数值越大,越靠后(可以是负数),只用在flex布局的item里
	-->
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>
</html>
